@extends('layout.home')
@section('title','会员支付页面')
@section('content')	
<style type="text/css">
	a.choosebox {
	    background: #f5f5f5 none repeat scroll 0 0;
	    border: 2px solid #cfcfcf;
	    color: #555;
	    cursor: default;
	    display: block;
	    float: left;
	    height: 32px;
	    margin-left: 5px;
	    margin-right: 10px;
	    padding: 5px 10px 0;
	    position: relative;
	    text-align: center;
	    line-height: 20px;
	    text-decoration: none;
	    width: auto;
	    cursor:pointer;
	}
	.control-label {
	    float: left;
	    padding-top: 0px;
	    padding-right: 20px;
	    text-align: right;
	    width: 100px;
	}
	.control-group-pay-mo {
	    float: left;
	    height: 45px;
	    margin-left: 5px;
	    margin-top: 0px;
	    width: 630px;
	}
	/*div span input[name='money']{
		padding-top:5px;
	}*/
</style>

<div class="aw-container-wrap">
	<div class="container aw-publish aw-publish-article">
		<div class="row">
			<div class="aw-content-wrap clearfix">
				<div class="col-sm-12 col-md-9 aw-main-content">
					<!-- tab 切换 -->
					<ul class="nav nav-tabs aw-nav-tabs active">
						<li class="active">
						<a href="http://localhost/test3/?/publish/article/">支付</a></li>
						<h2 class="hidden-xs"><i class="icon icon-ask"></i> 购买会员</h2>
					</ul>
					<!-- end tab 切换 -->
					<form action="/home/pay" method="post">
					<div class="aw-mod aw-mod-publish">
						<div class="mod-body">
							<div class="control-group-pay-type" style="margin-bottom: 20px;" name="payment">
								<span class="control-label">支付方式 :</span>
								<a href="javascript:void(0);" class="choosebox">支付宝</a>
								<a href="javascript:void(0);" class="choosebox">网银支付</a>
								<a href="javascript:void(0);" class="choosebox">手机充值卡支付</a>
							</div>
							<div class="clearfix"></div>
							<div style="height:20px;"></div>
							<!-- end 文章标题 -->
							<div class="control-group-pay-longth">
								<span class="control-label">付费模式 :</span>
								<div class="monthpad" id="monthpad" style="display: none;"></div>
								<span style="height:10px;width:20px;">
									<label class="checkbox">
								 		<input type="radio" class="month" name="price" value="30.00">&nbsp;按月支付&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										<input type="radio" class="year" checked name="price" value="300.00">&nbsp;按年支付
									</label>
								</span>
							</div>
							<div class="clearfix"></div>
							<div style="height:20px;"></div>
							<div class="control-group-price">
								<span class="control-label">应付金额 :</span>
								<div class="money_val">
									<span class="money_value">300.00</span>元
								</div>
							</div>
						</div>
						<div class="mod-footer clearfix">
							<span class="aw-anonymity"></span>
							{{csrf_field()}}
							<input type="hidden" name="payment" value="">
							<button class="btn btn-large btn-warning btn-publish-submit" id="publish_submit" >立即购买</button>
						</div>
					</div>
					</form>
				</div>
				<!-- 侧边栏 -->
				<div class="col-sm-12 col-md-3 aw-side-bar hidden-xs">
					<!-- 文章发起指南 -->
					<div class="aw-mod publish-help">
						<div class="mod-head">
							<h3>vip享有如下待遇：</h3>
						</div>
						<div class="mod-body">
							<p><b>• 待遇1:</b> 大部分分享的资源都可以免费下载。</p>
							<p><b>• 待遇2:</b> 部分特殊情况，有些精品资源仅VIP会员才有优惠折扣。其余用户无法下载！</p>
						</div>
					</div>
					<!-- end 文章发起指南 -->
				</div>
				<!-- end 侧边栏 -->
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	//绑定事件
	$('.control-group-pay-type a').click(function(){
		//改变当前元素的背景颜色
		$(this).css('background','#fff').siblings('a').css('background','#f5f5f5');
		//改变当前元素的边框
		$(this).css('border','solid 2px #ffcc99').siblings('a').css('border','solid 2px #cfcfcf');
	});
	//给单选框绑定事件
	//获取的值
	$('.month').click(function(){
		//获取当前这个元素的value值
		var money = $(this).val();
		//赋值给实付款,显示出来
		$('.money_value').html(money).css('color','#ffcc99');
	});
	$('.year').click(function(){
		//获取当前这个元素的value值
		var money = $(this).val();
		//赋值给实付款,显示出来
		$('.money_value').html(money).css('color','#ffcc99');
	});

	$('.choosebox').click(function(){
		//操作隐藏域的值
		//获取当前点击元素的值
		var v = $(this).html();
		//获取当前点击元素的name值
		var name = $(this).parent().attr('name');
		//修改隐藏域的值
		$('input[name='+name+']').val(v);
	});
</script>


@endsection